<!-- 子组件 -->
<template>
    <template v-if="!!WidgetTemplateTypes">
        <el-collapse modelValue="1">
            <el-collapse-item title="子组件" name="1">
                <widget-templates
                    :types="WidgetTemplateTypes"
                    class="row-sub-components"
                    @click="onClickWidgetTemplate"
                />
            </el-collapse-item>
        </el-collapse>
    </template>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import usePageHistory from '@/libs/edit/pageHistory'
import usePhoneView from '@/libs/edit/phoneView'
import WidgetTemplates from '@/components/edit/widget-templates'

// 子组件白名单
const subComponentWhite = {}
const slotsFiles = import.meta.glob('/src/components/edit/widget-view/components/widget-views/widget-*/white-list.js', { import: 'default', eager: true })
Object.keys(slotsFiles).forEach(key => {
    let tag = key.replace('/src/components/edit/widget-view/components/widget-views', '.')
    tag = tag.replace(/^.\/(.*)\/\w+\-(.*).\w+$/, '$1')
    const widgetTag = tag.replace(/^\w+\-(.*)$/, '$1')
    subComponentWhite[widgetTag] = slotsFiles[key]
})

export default defineComponent({
    name: 'RowSubComponents',
    components: {
        WidgetTemplates
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)
        
        const {
            onAddPageHistory
        } = usePageHistory()

        const {
            setScrollTopId
        } = usePhoneView()

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        const WidgetTemplateTypes = computed(() => {
            const list = subComponentWhite[widgetType.value]
            return list
        })

        const onClickWidgetTemplate = data => {
            if (['static-vessel'].includes(widgetType.value)) {
                widget.value.widgetData.eles.content.push(data)
                onAddPageHistory()
                setTimeout(() => setScrollTopId(data.eles.id), 100)
            }
        }

        return {
            widget,
            widgetType,
            WidgetTemplateTypes,
            onClickWidgetTemplate
        }
    }
})
</script>

<style lang="less" scoped>
.row-sub-components {
    ::v-deep(.widget-templates-list) {
        .widget-template-item {
            max-width: calc(100% / 4);
            height: 70px;
            font-size: 12px;
            .item-icon {
                font-size: 20px;
            }
        }
    }
}
</style>